
import React from 'react';
import classnames from 'classnames';
import css from './index.less';
import Range from 'components/config/range';
import Group from 'components/config/group';
import SubGroup from 'components/config/subGroup';
import Icon from 'components/icon';
import { Collapse, Input, Color, Image } from 'antd';
// const Panel = Collapse.Panel;

import { observer, inject } from 'mobx-react';

@inject('store')
@observer
export default class ImgConfig extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      // fanTop: 0,
      // fanLeft: 0,
    };
  }


  componentDidMount() {
  }


  onRangeChange(label, val) {
    const {store} = this.props;
    switch (label) {
      case '旋转' : store.img[0].setAttr('rotate', val); break;
      case '不透明度' : store.img[0].setAttr('opacity', val); break;
      case '字体模糊' : store.img[0].setAttr('blur', val); break;
      case '圆角半径' : store.img[0].setAttr('borderRadius', val); break;
    }
  }



  changeTopBot() {
    const {store} = this.props;
    store.img[0].changeRotateX();
    const { rotateX } = store.img[0];
    store.img[0].setAttr('rotateX', rotateX );
  }

  changeLeftRig() {
    const {store} = this.props;
    store.img[0].changeRotateY();
    const { rotateY } = store.img[0];
    store.img[0].setAttr('rotateY', rotateY );
  }



  // changeNumber(label, val) {
  //   const { store } = this.props;
  //   switch (label) {
  //     case '间距' : store.mask[0].setAttr('letterSpacing', val); break;
  //   }
  //
  // }



  render() {

    // const { mod } = this.props;
    //
    // const groups = [
    //   {
    //     title: '页面尺寸',
    //     children: (
    //       <div>
    //         <Input value={width}
    //                label="页面宽度"
    //                disabled={true} />
    //         <Input value={height}
    //                label="页面高度"
    //                type="number"
    //                onChange={val => {
    //                  mod.setAttr('height', parseFloat(val) || 0);
    //                }} />
    //       </div>
    //     )
    //   },
    //   {
    //     title: '背景颜色设置',
    //     children: (
    //       <Color label="背景颜色"
    //              color={mod.backgroundColor}
    //              onChange={color => {
    //                mod.setAttr('backgroundColor', color.rgba);
    //              }} />
    //     )
    //   },
    //   {
    //     title: '背景图案设置',
    //     children: (
    //       <Image />
    //     )
    //   },
    //   {
    //     title: '背景属性',
    //     children: (
    //       <div>
    //         <Range label="图片模糊" defaultValue={0} />
    //         <Range label="不透明度" />
    //       </div>
    //     )
    //   },
    //   {
    //     title: '其他设置',
    //     children: (
    //       <div>x</div>
    //     )
    //   },
    // ];


    const { blur, opacity, rotate, borderRadius } = this.props.store.img[0];
    const collapseProps = {
      bordered: false,
      defaultActiveKey: ['0', '2', '4'],
      className: css.body,
    };
    const rangeProps = {
      onRangeChange: this.onRangeChange.bind(this),

    };

    const groups = [
      {
        title: '预览框',
        children: (
          <div>
            <SubGroup title="预览框的第一个小title" key="0">
              <div>111</div>
            </SubGroup>
            <SubGroup title="预览框的第二个小title" key="1">
              <div>222</div>
            </SubGroup>
          </div>
        )
      },
      {
        title: '触发设置',
        children: (
          <SubGroup title="触发设置的第一个小title" key="0">
            1111111
          </SubGroup>
        )
      },
      {
        title: '跳转设置',
        children: (
          <div>
            <div className={css.inputUrl}>
              <label>链接</label>
              <input />
            </div>
            <div className={css.trigger}>
              <div>
                <i/><i/><i/><i/><i/>
              </div>
              <p>设置高级触发方式</p>
            </div>
          </div>
        )
      },
      {
        title: '预设动画',
        children: (
          <div>222</div>
        )
      },
      {
        title: '高级设置',
        children: (
          <div>
            <SubGroup title="自由变换" key="0">
              <Range label="旋转" {...rangeProps} min={-180} max={180} step={1} inputValue={rotate}/>
              <div className={css.cengji}>
                <label>反转</label>
                <Icon type="icon-upside-down" onClick={this.changeTopBot.bind(this)}/>
                <Icon type="icon-flip" onClick={this.changeLeftRig.bind(this)} />
              </div>
            </SubGroup>
            <SubGroup title="元素层级顺序" key="1">
              123123
            </SubGroup>
            <SubGroup title="属性" key="2">
              <Range label="不透明度" {...rangeProps} min={0} max={1} step={0.01} inputValue={opacity}/>
              <Range label="字体模糊" {...rangeProps} min={0} max={10} step={0.1} inputValue={blur}/>
              <Range label="圆角半径" {...rangeProps} min={0} max={100} step={1} inputValue={borderRadius}/>
            </SubGroup>
          </div>
        )
      }
    ];


    return (

      <Collapse {...collapseProps}>
        {groups.map((group, key) => {
          const _props = {
            ...group,
            key,
          };
          return <Group {..._props}/>;
        })}
      </Collapse>


    );
  }
}


